import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

class MyTabView extends StatefulWidget {
  const MyTabView({super.key});

  @override
  // ignore: library_private_types_in_public_api
  _MyTabView createState() => _MyTabView();
}

class _MyTabView extends State<MyTabView> {
  // ignore: non_constant_identifier_names
  List TabBarObj = [];
  int activeIndex = 0;
  @override
  void initState() {
    getHttp();
    super.initState();
  }

  getHttp() async {
    Dio dio = Dio();
    var res =
        await dio.get('https://zhousg.atomgit.net/harmonyos5/takeaway.json');
    print(res.data);
    setState(() {
      TabBarObj = res.data;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (TabBarObj.isEmpty) {
      return const Center(child: CircularProgressIndicator());
    }
    return Stack(
      alignment: Alignment.bottomCenter,
      children: [
        Container(
          child: Row(
            children: [
              Expanded(
                child: Container(
                  width: double.infinity,
                  decoration: const BoxDecoration(color: Colors.grey),
                  child: _myLeft(),
                ),
              ),
              Expanded(
                flex: 3,
                child: _myRight(),
              )
            ],
          ),
        ),
        Container(
          width: 300,
          height: 50,
          margin: const EdgeInsets.only(bottom: 50),
          padding: const EdgeInsets.only(left: 20, right: 8),
          decoration: const BoxDecoration(
              color: Colors.black87,
              borderRadius: BorderRadius.all(Radius.circular(50))),
          child: _shopping(),
        )
      ],
    );
  }

  Widget _myLeft() {
    return ListView.builder(
      itemCount: 3,
      itemBuilder: (context, index) {
        return Container(
          width: double.infinity,
          height: 50,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: index == 0 ? Colors.white : Colors.transparent,
          ),
          child: Text(
            TabBarObj[index]['name'],
            style: const TextStyle(fontSize: 16, color: Colors.black),
          ),
        );
      },
    );
  }

  Widget _myRight() {
    final foods = TabBarObj[activeIndex]['foods'];
    return ListView.separated(
        itemBuilder: (context, index) {
          final food = foods[index];
          return _myRightItem(food);
        },
        separatorBuilder: (context, index) {
          return Container(
            height: 10,
            color: Colors.white,
            width: double.infinity,
          );
        },
        itemCount: foods.length);
  }

  /// 食品列表项
  _myRightItem(food) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10),
      child: Row(
        children: [
          Image.network(
            food['picture'],
            width: 60,
            height: 60,
            fit: BoxFit.cover,
          ),
          Expanded(
              child: Container(
                  padding: const EdgeInsets.only(left: 10),
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          food['name'],
                          style: const TextStyle(
                              fontSize: 16, fontWeight: FontWeight.bold),
                        ),
                        Text(
                          food['description'] ?? "",
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(
                            fontSize: 12,
                            color: Colors.black54,
                          ),
                        ),
                        Text(
                          "¥ ${food['price']}",
                          style: const TextStyle(
                            fontSize: 12,
                            color: Colors.red,
                          ),
                        ),
                      ])))
        ],
      ),
    );
  }

  Widget _shopping() {
    return const Positioned(
        bottom: 150,
        left: 50,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '￥ 0.00',
                  style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                ),
                Text(
                  '预估另需配送费 ￥0.00元',
                  style: TextStyle(fontSize: 12, color: Colors.white),
                )
              ],
            ),
            Text(
              '去下单',
              style: TextStyle(
                  fontSize: 16, fontWeight: FontWeight.bold, color: Colors.red),
            )
          ],
        ));
  }
}
